<template>
  <el-dialog
    :title="title"
    :visible="dialogVisible"
    @close="menuCancel"
    :close-on-click-modal="false"
  >
    <el-form
      ref="form"
      :rules="rules"
      :model="form"
      label-width="100px"
      style="width: 400px; margin-left:50px;"
    >
      <el-form-item label="父级菜单：" prop="tree">
        <el-cascader
          ref="menuCascader"
          v-model="form.parentId"
          :options="options"
          :props="cateListProps"
          :show-all-levels="false"
          :disabled="title == '编辑菜单'"
          @change="menuChange"
        ></el-cascader>
      </el-form-item>
      <el-form-item label="菜单名称：" prop="name">
        <el-input v-model.trim="form.name" :maxlength="33"></el-input>
      </el-form-item>

      <el-form-item label="路由key：" prop="routerKey">
        <el-row>
          <span v-if="this.title == '添加菜单'">{{ form.routerKey1 }}</span>
          <el-input :maxlength="33" v-model.trim="form.routerKey"></el-input>
        </el-row>
      </el-form-item>
      <el-row>
        <el-col :xs="5" :sm="8" :md="10" :lg="12" :xl="19">
          <el-form-item label="图标：" prop="icoVal">
            <div class="icoBox">
              <el-radio
                v-for="i in icoArr"
                v-model="form.icoVal"
                :label="i"
                :key="i"
              >
                <i :class="'el-icon-' + i"></i>
              </el-radio>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" :loading="btnLoading" @click="menuSubmit"
        >确 定</el-button
      >
      <el-button @click="menuCancel">取 消</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { addMenu, editMenu, menuTree } from '@/api/menu'
export default {
  name: 'menuDialog',
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    },
    row: {
      type: Object,
      default: {}
    },
    icoArr: {
      type: Array,
      default: []
    }
  },
  data () {
    return {
      form: {
        name: '',
        icoVal: '',
        routerKey: '',
        parentId: '',
        routerKey1: ''
      },
      rules: {
        parentId: [
          { required: true, message: '请选择父级菜单', trigger: 'blur' }
        ],
        name: [{ required: true, message: '请输入菜单名称', trigger: 'blur' }],
        icoVal: [{ required: true, message: '请选择图标', trigger: 'blur' }],
        routerKey: [
          { required: true, message: '请输入路由key', trigger: 'blur' }
        ]
      },
      btnLoading: false,
      options: [],
      cateListProps: {
        value: 'id', //匹配响应数据中的id
        label: 'name', //匹配响应数据中的name
        checkStrictly: true
      },
      radio: ''
    }
  },
  created () {
    // this.menuTreea()
  },
  methods: {
    // 菜单选择Change
    menuChange (value) {
      this.$refs.menuCascader.dropDownVisible = false //选择完成自动折叠
      this.menuChangeRec(this.options, value)
      if (this.title == '添加菜单') {
        this.menuChangeRec(this.options, value)
      }
    },
    // 递归
    menuChangeRec (data, a) {
      data.forEach(i => {
        if (i.id === a[a.length - 1]) {
          this.form.routerKey1 = i.routerKey + '/'
        }
        if (i.children) {
          this.menuChangeRec(i.children, a)
        }
      })
    },

    // 菜单数据处理
    menuTreea () {
      menuTree().then(res => {
        this.options = this.menuDataRec(res.data.data)
      })
    },
    // 递归
    menuDataRec (data) {
      let arr = []
      data.forEach(i => {
        if (i.children && i.children.length > 0) {
          i.data.children = []
          i.data.children = this.menuDataRec(i.children)
        }
        arr.push(i.data)
      })
      return arr
    },
    menuSubmit () {
      this.$refs.form.validate(reult => {
        if (reult) {
          this.btnLoading = true
          if (this.title == '添加菜单') {
            let params = {
              parentId: Number(
                this.form.parentId
                  ? this.form.parentId[this.form.parentId.length - 1]
                  : ''
              ),
              name: this.form.name,
              ico: this.form.icoVal,
              routerKey: this.form.routerKey1 + this.form.routerKey
            }
            addMenu(params)
              .then(res => {
                if (res.data.code == 200) {
                  this.$emit('menuCancel', false)
                  this.$emit('loadData')
                  this.btnLoading = false
                  this.$notify.success({
                    title: '成功',
                    message: '添加菜单成功'
                  })
                }
              })
              .finally(() => {
                this.btnLoading = false
                this.$emit('loadData')
              })
          }
          if (this.title == '编辑菜单') {
            let params = {
              id: Number(this.row.id),
              name: this.form.name,
              ico: this.form.icoVal,
              routerKey: this.form.routerKey
            }
            editMenu(params)
              .then(res => {
                if (res.data.code == 200) {
                  this.$emit('menuCancel', false)
                  this.$emit('loadData')
                  this.btnLoading = false
                  this.$notify.success({
                    title: '成功',
                    message: '编辑菜单成功'
                  })
                }
              })
              .finally(() => {
                this.btnLoading = false
                this.$emit('loadData')
              })
          }
        }
      })
    },
    // 取消
    menuCancel () {
      this.$emit('menuCancel', false)
      this.$refs.form.resetFields()
      this.form.parentId = ''
      this.form.routerKey1 = ''
    },
    // 编辑回显
    editRender () {
      this.$nextTick(() => {
        this.form.name = this.row.name
        this.form.routerKey = this.row.routerKey
        this.form.icoVal = this.row.ico
        this.form.parentId = this.row.parentId
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.icoBox {
  // width: 700px;
  width: 100%;
  height: 140px;
  overflow-y: auto;
  i {
    font-size: 40px;
  }
}
::v-deep .el-row {
  width: 1000px;
  .el-input.el-input--medium {
    width: 200px;
  }
}
</style>
